<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Cylinders</title>
    <meta name="description" content="Cylinders — A-Frame">
    <script src="../../../dist/aframe-master.js"></script>
  </head>
  <body>
    <a-scene background="color: #ECECEC">
      <a-assets>
        <img id="checkerboard" src="checkerboard.png">
      </a-assets>

      <!-- Pacman -->
      <a-cylinder position="-4 3 -5" rotation="65 45 0" radius="1" height="1" theta-start="57"
                  theta-length="286" side="double" color="#FFC65D"></a-cylinder>

      <!-- Curved cylinder -->
      <a-cylinder position="0 3 -5" rotation="45 60 0" radius="1.5" height="1" theta-start="0"
                  theta-length="172" side="double" open-ended="true"
                  color="#93648D"></a-cylinder>

      <!-- Textured cylinder -->
      <a-cylinder position="4 3 -5" rotation="0 90 0" radius="2.866" height="3"
                  theta-length="180" scale="0.5 0.5 0.5" open-ended="true" side="double"
                  src="#checkerboard"></a-cylinder>

      <!-- Hexagon -->
      <a-cylinder position="-4 0 -5" rotation="90 -90 20" radius="1" segments-radial="6"
                  color="#F16745"></a-cylinder>

      <!-- Skinny tube -->
      <a-cylinder position="0 0 -5" rotation="-80 -15 -20" height="5" open-ended="true"
                  side="double" color="#7BC8A4"></a-cylinder>

      <!-- Flat smooth disc -->
      <a-cylinder position="4 0 -5" rotation="45 -45 0" radius="2" height="0.5"
                  segments-radial="64" color="#4CC3D9" metalness=".1"></a-cylinder>

    </a-scene>
  </body>
</html>
